<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="javax.portlet.*"%>
<%@ page import="pits.dto.EditProjectInfoDTO" %>
<%@ page import="pits.dao.EditProjectInfoDAO" %>
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet"%>

<portlet:defineObjects />

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/js/simpletreemenu.js" %>'></script>
<!--<style type="text/css" href='<%=renderRequest.getContextPath() + "/css/simpletree.css" %>'></style>-->

<script type="text/javascript" src='<%=renderRequest.getContextPath() + "/js/calendarDateInput.js" %>'></script>

<script type="text/javascript">
	var comSelected;
	var existedLangList = "";
	var existedAppList = "";
	var existedTechList = "";
	var existedFrameList = "";

	function isIn(container, str, splitter) {
		var arr = container.split(splitter);
		for (i = 0; i < arr.length; i++) {
			if (arr[i] == str) return true;
		}
		return false; 
	}
	
	function getForm(namespace, name) {
		return document.forms[namespace + name];
	}
 
	function submitForm(namespace, name, action) {
		var frm = getForm(namespace, name);
		frm.txtAction.value = action;
		frm.submitLink.value = "EditProjectInfo.jsp";

		if (name != "myForm") {
			if (document.getElementById('dep' + comSelected).value == 'Other') {
				frm.department.value = ":" + frm.otherDepartment.value;
			}
			else {
				frm.department.value = document.getElementById('dep' + comSelected).value;
			}
		}
		//document.write('Lang: ' + frm.language.value + '<br>App: ' + frm.application.value + '<br>Tech: ' + frm.technology.value + '<br>Frame: ' + frm.framework.value);
		
		frm.submit();
	}
</script>

<!--<style type="text/css" href='<%=renderRequest.getContextPath() + "/css/style.css" %>' media="screen"></style>-->

</head>

<body>
<form name="<portlet:namespace/>myForm" action="<portlet:actionURL/>" method="POST">
<input type="hidden" name="txtAction"/>
<input type="hidden" name="submitLink"/>
<p align="right">
	You are logging in as 
	<a href="#" onclick="submitForm('<portlet:namespace/>', 'myForm', 'getEmployeeInfo')"><b>${sessionScope.userName}</b></a>
	! &nbsp;
	<a href="#" onclick="submitForm('<portlet:namespace/>', 'myForm', 'home')">Home</a>
	| &nbsp;
	<a href="#" onclick="submitForm('<portlet:namespace/>', 'myForm', 'logout')">Logout</a>
</p>
</form>

<form name="<portlet:namespace/>editProjectInfoForm" action="<portlet:actionURL/>" method="post">
<input type="hidden" name="txtAction" />
<input type="hidden" name="submitLink" />
<table>

	<tr class="title">
		<td colspan="2">
			<img src='<%=renderRequest.getContextPath() + "/img/HCMUTLogo.jpg" %>' />
			<h1><a href="#">Personal information tracking system </a></h1>
			<p>exploit the value of data</p>
			<hr />
		</td>
	</tr>
	
	<tr>	
		<td>
			<table border="1">
				<tr>
					<td><h2 class="title">Project  Information</h2></td>
				</tr>
					
				<tr>
					<td><em>General Information </em></td>
				</tr>
				
				<%
				EditProjectInfoDTO projectInfo = new EditProjectInfoDAO().getData("" + session.getAttribute("projectID"));
				%>
								
				<tr>
					<td>
						<table border="1" width="100%">							
							<tr>
								<td align="left" valign="bottom">&nbsp;Project Name</td>
								<td align="left" valign="middle" colspan="3">
									<input type="text" name="projectName" value='<%=projectInfo.getProjectName() %>'/>
								</td>
							</tr>
							<tr>
								<td align="left" valign="bottom">&nbsp;Project's Description&nbsp;</td>
								<td align="left" valign="middle" colspan="3">
									<textarea name="description"><%=projectInfo.getDescription() %></textarea>
								</td>
							</tr>
							<tr>
								<td align="left" valign="middle">&nbsp;Company&nbsp;</td>
								
								<td align="left" valign="middle">
									<select name="companyID" id="comSelect" onchange="
										for (k = 0; k < '<%=projectInfo.getCompanyNames().size() %>'; k++) {
											document.getElementById(k).style.display='none';
										}
										document.getElementById(this.selectedIndex).style.display = 'inline';
										comSelected = this.selectedIndex;
										document.getElementById('dep' + this.selectedIndex).selectedIndex = 0;
										this.form.otherDepartment.style.visibility = 'hidden';
									">
									<%
									for (int i = 0; i < projectInfo.getCompanyNames().size(); i++) {
									%>
										<option value=<%=projectInfo.getCompanyIDs().get(i).intValue() %> ><%=projectInfo.getCompanyNames().get(i) %></option>
									<%
									}
									%>
									</select>
									<script type="text/javascript">
										for (i = 0; i < document.getElementById('comSelect').length; i++) {
											if (document.getElementById('comSelect').options[i].value == <%=projectInfo.getCurrentComID() %>) {
												document.getElementById('comSelect').selectedIndex = i;
												comSelected = i;
												break;
											}
										}
									</script>
								</td>
								
								<td colspan="2" align="left" valign="middle">Department
									<input type="hidden" name="department" />
									<%
									for (int i = 0; i < projectInfo.getCompanyNames().size(); i++) {
										String dis = new String("none");
										if (i == 0) dis = "none";
									%>
										<div id='<%=i %>' style='<%="position:relative; display:" + dis %>'>
										<select id='<%="dep" + i %>' onchange="
											if(this.value=='Other'){
												this.form.otherDepartment.style.visibility='visible';
												this.form.otherDepartment.focus();
											}
											else{this.form.otherDepartment.style.visibility='hidden';}
										">
									<%
										for (int j = 0; j < projectInfo.getDepartNames().get(i).size(); j++) {
									%>
											<option value=<%=projectInfo.getDepartIDs().get(i).get(j) %> ><%=projectInfo.getDepartNames().get(i).get(j) %></option>
									<%
										}
									%>
											<option value="Other">Other</option>
										</select>
										</div>
									<%}%>
									<script type="text/javascript">
										comSelected = document.getElementById('comSelect').selectedIndex;
										for (k = 0; k < <%=projectInfo.getCompanyNames().size() %>; k++) {
											document.getElementById(k).style.display='none';
										}
										document.getElementById(comSelected).style.display = 'inline';
										for (m = 0; m < document.getElementById('dep' + comSelected).length; m++) {
											if (document.getElementById('dep' + comSelected).options[m].value == <%=projectInfo.getCurrentDepartID() %>) {
												document.getElementById('dep' + comSelected).selectedIndex = m;
												break;
											}
										}
									</script>
									
									<input name="otherDepartment" type="text" style="visibility:hidden" />
								</td>
							</tr>

							<tr>
								<td align="left" valign="middle" rowspan="2">&nbsp;Project's Period&nbsp;</td>
								<td align="left" valign="bottom">From</td>
								<td align="left" valign="middle" colspan="2">&nbsp;
									<script>DateInput('periodFrom', true, 'DD/MM/YYYY', '<%= request.getContextPath() %>', '<%=projectInfo.getPeriodFrom() %>');</script>
								</td>
							</tr>
							<tr>
								<td align="left" valign="bottom">&nbsp;To&nbsp;</td>
								<td align="left" valign="middle" colspan="2">&nbsp;
									<script>DateInput('periodTo', true, 'DD/MM/YYYY', '<%= request.getContextPath() %>', '<%=projectInfo.getPeriodTo() %>');</script>
								</td>
							</tr>
							
							<tr>
								<td align="left" valign="bottom">&nbsp;Size&nbsp;</td>
								<td colspan="3" align="left" valign="middle">
									<textarea name="size" ><%=projectInfo.getSize() %></textarea>
								</td>
							</tr>
							
							<tr>
								<td align="left" valign="bottom" colspan="4"><em>&nbsp;Technology Information&nbsp;</em></td>								
							</tr>
							<tr>
								<td align="left" valign="bottom">&nbsp;Language&nbsp;</td>
								<td align="left" valign="bottom">
									<input type="hidden" name="language" value='<%=projectInfo.getCurrentLangID() %>' />
									<textarea name="txtLanguage" ><%=projectInfo.getCurrentLangName() %></textarea>
								</td>
								<td align="left" valign="bottom">
									<select name="selectLanguage" onchange="
										if(this.value=='Other'){
											this.form.otherLanguage.style.visibility='visible';
											this.form.otherLanguage.focus();
										}
										else{
											this.form.otherLanguage.style.visibility='hidden';
										}
									">
									<%
									for (int i = 0; i < projectInfo.getLangNames().size(); i++) {
									%>
										<option value='<%=projectInfo.getLangIDs().get(i) %>'><%=projectInfo.getLangNames().get(i) %></option>
									<%
									}
									%>
										<option value="Other">Other</option>
									</select>
									
									<%for (int i = 0; i < projectInfo.getLangNames().size(); i++) {%>
									<script type="text/javascript">
										existedLangList += ", " + "<%=projectInfo.getLangNames().get(i) %>";
									</script>
									<%}%>
									<script type="text/javascript">
										existedLangList = existedLangList.substr(2);
									</script>
									
									<input name="otherLanguage" type="text" style="visibility:hidden" />
								</td>
								<td align="left" valign="bottom">
									<input name="addLanguage" type="button" value="Add" onclick="
										if(this.form.selectLanguage.value!='Other'){
											if(this.form.language.value==''){
												this.form.language.value = this.form.selectLanguage.value;
												this.form.txtLanguage.value = this.form.selectLanguage.options[this.form.selectLanguage.selectedIndex].text;
											}
											else if (!isIn(this.form.language.value, this.form.selectLanguage.value, ':')) {
												this.form.language.value += ':' + this.form.selectLanguage.value;
												this.form.txtLanguage.value += ', ' + this.form.selectLanguage.options[this.form.selectLanguage.selectedIndex].text;
											}
										}
										else if (!isIn(existedLangList, this.form.otherLanguage.value, ', ')) {
											if(this.form.language.value==''){
												this.form.language.value = this.form.otherLanguage.value;
												this.form.txtLanguage.value = this.form.otherLanguage.value;
											}
											else if (!isIn(this.form.txtLanguage.value, this.form.otherLanguage.value, ', ')) {
												this.form.language.value += ':' + this.form.otherLanguage.value;
												this.form.txtLanguage.value += ', ' + this.form.otherLanguage.value;
											}
										}
									"/>
								</td>
							</tr>
							<tr>
								<td align="left" valign="bottom">&nbsp;Type of Application &nbsp;</td>
								<td align="left" valign="bottom">
									<input type="hidden" name="application" value='<%=projectInfo.getCurrentAppID() %>' />
									<textarea name="txtApp" ><%=projectInfo.getCurrentAppName() %></textarea>
								</td>
								<td align="left" valign="bottom">	
									<select name="selectApp" onchange="
										if(this.value=='Other'){
											this.form.otherApp.style.visibility='visible';
											this.form.otherApp.focus();
										}
										else{this.form.otherApp.style.visibility='hidden';}
									">
										<%
										for (int i = 0; i < projectInfo.getAppNames().size(); i++) {
										%>
											<option value='<%=projectInfo.getAppIDs().get(i) %>'><%=projectInfo.getAppNames().get(i) %></option>
										<%
										}
										%>
										<option value="Other">Other Application</option>
									</select>
									
									<%for (int i = 0; i < projectInfo.getAppNames().size(); i++) {%>
									<script type="text/javascript">
										existedAppList += ", " + "<%=projectInfo.getAppNames().get(i) %>";
									</script>
									<%}%>
									<script type="text/javascript">
										existedAppList = existedAppList.substr(2);
									</script>
									
									<input name="otherApp" type="text" style="visibility:hidden" />
								</td>
								<td align="left" valign="bottom">
									<input name="addApp" type="button" value="Add" onclick="
										if(this.form.selectApp.value!='Other'){
											if(this.form.application.value==''){
												this.form.application.value = this.form.selectApp.value;
												this.form.txtApp.value = this.form.selectApp.options[this.form.selectApp.selectedIndex].text;
											}
											else if (!isIn(this.form.application.value, this.form.selectApp.value, ':')) {
												this.form.application.value += ':' + this.form.selectApp.value;
												this.form.txtApp.value += ', ' + this.form.selectApp.options[this.form.selectApp.selectedIndex].text;
											}
										}
										else if (!isIn(existedAppList, this.form.otherApp.value, ', ')) {
											if(this.form.application.value==''){
												this.form.application.value = this.form.otherApp.value;
												this.form.txtApp.value = this.form.otherApp.value;
											}
											else if (!isIn(this.form.txtApp.value, this.form.otherApp.value, ', ')) {
												this.form.application.value += ':' + this.form.otherApp.value;
												this.form.txtApp.value += ', ' + this.form.otherApp.value;
											}
										}
									"/>
								</td>
							</tr>
							<tr>
								<td align="left" valign="bottom">&nbsp;Kind of Technology&nbsp;</td>
								<td align="left" valign="bottom">
									<input type="hidden" name="technology" value='<%=projectInfo.getCurrentTechID() %>' />
									<textarea name="txtTech"><%=projectInfo.getCurrentTechName() %></textarea>
								</td>
								<td align="left" valign="bottom">
									<select name="selectTech" onchange="
										if(this.value=='Other'){
											this.form.otherTech.style.visibility='visible';
											this.form.otherTech.focus();
										}
										else{this.form.otherTech.style.visibility='hidden';}
									">
										<%
										for (int i = 0; i < projectInfo.getTechNames().size(); i++) {
										%>
											<option value='<%=projectInfo.getTechIDs().get(i) %>'><%=projectInfo.getTechNames().get(i) %></option>
										<%
										}
										%>
										<option value="Other">Other</option>
									</select>
									
									<%for (int i = 0; i < projectInfo.getTechNames().size(); i++) {%>
									<script type="text/javascript">
										existedTechList += ", " + "<%=projectInfo.getTechNames().get(i) %>";
									</script>
									<%}%>
									<script type="text/javascript">
										existedTechList = existedTechList.substr(2);
									</script>
									
									<input name="otherTech" type="text" style="visibility:hidden" />
								</td>
								<td align="left" valign="bottom">
									<input name="addTech" type="button" value="Add" onclick="
										if(this.form.selectTech.value!='Other'){
											if(this.form.technology.value==''){
												this.form.technology.value = this.form.selectTech.value;
												this.form.txtTech.value = this.form.selectTech.options[this.form.selectTech.selectedIndex].text;
											}
											else if (!isIn(this.form.technology.value, this.form.selectTech.value, ':')) {
												this.form.technology.value += ':' + this.form.selectTech.value;
												this.form.txtTech.value += ', ' + this.form.selectTech.options[this.form.selectTech.selectedIndex].text;
											}
										}
										else if (!isIn(existedTechList, this.form.otherTech.value, ', ')) {
											if(this.form.technology.value==''){
												this.form.technology.value = this.form.otherTech.value;
												this.form.txtTech.value = this.form.otherTech.value;
											}
											else if (!isIn(this.form.txtTech.value, this.form.otherTech.value, ', ')) {
												this.form.technology.value += ':' + this.form.otherTech.value;
												this.form.txtTech.value += ', ' + this.form.otherTech.value;
											}
										}
									"/>
								</td>
							</tr>
							<tr>
								<td align="left" valign="bottom">&nbsp;Kind of Framework &nbsp;</td>
								<td align="left" valign="bottom">
									<input type="hidden" name="framework" value='<%=projectInfo.getCurrentFrameID() %>' />
									<textarea name="txtFrame"><%=projectInfo.getCurrentFrameName() %></textarea>
								</td>
								<td align="left" valign="bottom">
									<input type="hidden" name="frwkKind" />
									<select name="selectFrame" onchange="
										if(this.value=='Other'){
											this.form.otherFrame.style.visibility='visible';
											this.form.otherFrame.focus();
										}
										else{this.form.otherFrame.style.visibility='hidden';}
									">
										<%
										for (int i = 0; i < projectInfo.getFrameNames().size(); i++) {
										%>
											<option value='<%=projectInfo.getFrameIDs().get(i) %>'><%=projectInfo.getFrameNames().get(i) %></option>
										<%
										}
										%>
										<option value="Other">Other</option>
									</select>
									
									<%for (int i = 0; i < projectInfo.getFrameNames().size(); i++) {%>
									<script type="text/javascript">
										existedFrameList += ", " + "<%=projectInfo.getFrameNames().get(i) %>";
									</script>
									<%}%>
									<script type="text/javascript">
										existedFrameList = existedFrameList.substr(2);
									</script>
									
									<input name="otherFrame" type="text" style="visibility:hidden" />
								</td>
								<td align="left" valign="bottom">
									<input name="addFrame" type="button" value="Add" onclick="
										if(this.form.selectFrame.value!='Other'){
											if(this.form.framework.value==''){
												this.form.framework.value = this.form.selectFrame.value;
												this.form.txtFrame.value = this.form.selectFrame.options[this.form.selectFrame.selectedIndex].text;
											}
											else if (!isIn(this.form.framework.value, this.form.selectFrame.value, ':')) {
												this.form.framework.value += ':' + this.form.selectFrame.value;
												this.form.txtFrame.value += ', ' + this.form.selectFrame.options[this.form.selectFrame.selectedIndex].text;
											}
										}
										else if (!isIn(existedFrameList, this.form.otherFrame.value, ', ')) {
											if(this.form.framework.value==''){
												this.form.framework.value = this.form.otherFrame.value;
												this.form.txtFrame.value = this.form.otherFrame.value;
											}
											else if (!isIn(this.form.txtFrame.value, this.form.otherFrame.value, ', ')) {
												this.form.framework.value += ':' + this.form.otherFrame.value;
												this.form.txtFrame.value += ', ' + this.form.otherFrame.value;
											}
										}
									"/>
								</td>
							</tr>

							<tr align="left" valign="bottom">
								<td colspan="5">
									<%
									if (session.getAttribute("roles").equals("admin")) {
									%>
									<input type="button" value="Update" onclick="
										submitForm('<portlet:namespace/>','editProjectInfoForm','updateProjectInfo')
									" />
									<%
									}
									%>
									<input type="button" value="Cancel" onclick="
										submitForm('<portlet:namespace/>','editProjectInfoForm','cancel')
									"/>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>			
		</td>
	</tr>
</table>
</form>
</body>
